import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:smart_devices/bruno/src/components/button/brn_normal_button.dart';
import 'package:smart_devices/bruno/src/components/radio/brn_radio_button.dart';
import 'package:smart_devices/bruno/src/components/toast/brn_toast.dart';
import 'package:smart_devices/model/department.dart';
import 'package:smart_devices/ui/draw_under_line.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';
import 'package:smart_devices/vo/dept.dart';

import 'select_logic.dart';

class DeptSelectView extends GetView<DeptSelectLogic> {
  const DeptSelectView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DeptSelectLogic>(
      builder: (_) {
        return Scaffold(
          backgroundColor:
              ColorsUtils.parseColorFromHexString(ColorsUtils.colorFfff),
          appBar: AppBar(
            leading: IconButton(
              icon: const Icon(
                Icons.arrow_back_ios,
                color: Colors.white,
                size: 15,
              ),
              onPressed: Get.back,
            ),
            automaticallyImplyLeading: false,
            backgroundColor:
                ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
            title: Text(
              '部门人员选择',
              style: StylesUtils.customTextStyle(
                  fontSize: 18, fontWeight: FontWeight.w700),
            ),
            centerTitle: true,
            systemOverlayStyle: SystemUiOverlayStyle.dark,
            bottom: PreferredSize(
                preferredSize: const Size.fromHeight(50),
                child: Container(
                  height: 50,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 15, vertical: 7),
                  decoration: const BoxDecoration(color: Colors.white),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        border: Border.all(
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.colorE4e4))),
                    child: Row(
                      children: [
                        Container(
                          width: 36,
                          alignment: Alignment.center,
                          child: ToolsUtils.urlSvg(
                              'https://cdn7.axureshop.com/demo2023/2163241/images/常用组件/u2227.svg'),
                        ),
                        Expanded(
                            child: TextField(
                          textDirection: TextDirection.ltr,
                          controller: TextEditingController(
                              text: controller.search.value),
                          cursorColor: ColorsUtils.parseColorFromHexString(
                              ColorsUtils.color1c24),
                          style: StylesUtils.customTextStyle(
                              fontSize: 16, color: ColorsUtils.color1c24),
                          textAlign: TextAlign.left,
                          textAlignVertical: TextAlignVertical.center,
                          cursorWidth: 2,
                          // cursorHeight: 18,
                          cursorRadius: const Radius.circular(2),
                          decoration: InputDecoration(
                              hintText: '请输入人员名称',
                              hintStyle: StylesUtils.customTextStyle(
                                  color: ColorsUtils.colorCccc, fontSize: 13),
                              isDense: true,
                              isCollapsed: true,
                              border: InputBorder.none,
                              focusColor: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.color1c24),
                              contentPadding:
                                  const EdgeInsets.symmetric(vertical: 13),
                              focusedBorder: InputBorder.none),
                          onChanged: (String text) {
                            controller.search.value = text;
                          },
                        ))
                      ],
                    ),
                  ),
                )),
            elevation: 0,
          ),
          body: Obx(() => Padding(
                padding: const EdgeInsets.only(bottom: 80),
                child: CustomScrollView(
                  slivers: controller.depts.map(buildGroup).toList(),
                ),
              )),
          extendBody: true,
          bottomSheet: Container(
            height: 70,
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                    top: BorderSide(
                        color: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.colorE4e4)))),
            alignment: Alignment.center,
            child: FractionallySizedBox(
              widthFactor: 0.9,
              heightFactor: 0.75,
              alignment: Alignment.center,
              child: BrnNormalButton(
                onTap: () {
                  for (var element in controller.depts) {
                    for (var u in element.users) {
                      if (u.checked) {
                        return Get.back(result: {
                          'dept': DepartmentModel(
                              deptId: element.deptId, name: element.name),
                          'user': u
                        });
                      }
                    }
                  }
                  BrnToast.show('请选择部门人员', context,
                      gravity: BrnToastGravity.bottom);
                },
                backgroundColor:
                    ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
                text: '',
                child: Text(
                  '提交',
                  style: StylesUtils.customTextStyle(fontSize: 14),
                ),
              ),
            ),
          ),
        );
      },
      init: controller,
    );
  }

  Widget buildGroup(DeptVo deptVo) {
    return SliverMainAxisGroup(slivers: [
      SliverPersistentHeader(
        pinned: true,
        delegate: HeaderDelegate(deptVo.name),
      ),
      SliverList.builder(
        itemBuilder: (_, int index) {
          return DrawUnderLine(
            color: deptVo.users.length == index + 1
                ? Colors.transparent
                : ColorsUtils.parseColorFromHexString('#aaaaaa'),
            child: Container(
              height: 50,
              color: Colors.white,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(left: 20),
              child: Row(
                children: [
                  Container(
                    width: 40,
                    alignment: Alignment.center,
                    child: BrnRadioButton(
                      radioIndex: index,
                      onValueChangedAtIndex: (int i, bool flag) {
                        for (var element in controller.depts) {
                          for (var u in element.users) {
                            u.checked = false;
                          }
                        }
                        deptVo.users[index].checked = flag;
                        controller.depts.refresh();
                      },
                      isSelected: deptVo.users[index].checked,
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    margin: const EdgeInsets.symmetric(horizontal: 10),
                    child: CircleAvatar(
                      radius: 20,
                      backgroundImage: NetworkImage(deptVo.users[index].avatar),
                    ),
                  ),
                  Text(
                    deptVo.users[index].name,
                    textAlign: TextAlign.left,
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333),
                  )
                ],
              ),
            ),
          );
        },
        itemCount: deptVo.users.length,
      )
    ]);
  }
}

class HeaderDelegate extends SliverPersistentHeaderDelegate {
  const HeaderDelegate(this.title);

  final String title;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
        alignment: Alignment.centerLeft,
        color: const Color(0xffF6F6F6),
        padding: const EdgeInsets.only(left: 20),
        height: 40,
        child: Text(
          title,
          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
        ));
  }

  @override
  double get maxExtent => minExtent;

  @override
  double get minExtent => 40;

  @override
  bool shouldRebuild(covariant HeaderDelegate oldDelegate) =>
      title != oldDelegate.title;
}
